<!-- src/views/AuthorizationManagement.vue -->
<template>
  <div>
    <Card>
      <CardHeader>
        <CardTitle class="text-2xl font-bold tracking-tight">
          授权管理
        </CardTitle>
        <CardDescription class="text-muted-foreground">
          你的账号授权了以下产品
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div class="rounded-md border mt-5">
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>应用名称</TableHead>
                <TableHead>授权时间</TableHead>
                <TableHead>授权范围</TableHead>
                <TableHead>操作</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              <TableRow v-for="app in authorizedApps" :key="app.id">
                <TableCell>{{ app.name }}</TableCell>
                <TableCell>{{ app.authorizedTime }}</TableCell>
                <TableCell>{{ app.scope }}</TableCell>
                <TableCell>
                  <Button variant="destructive" size="sm" @click="revokeAuthorization(app.id)">
                    撤销授权
                  </Button>
                </TableCell>
              </TableRow>
            </TableBody>
          </Table>
        </div>
      </CardContent>
    </Card>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import {
  Card,
  CardHeader,
  CardTitle,
  CardContent,
  CardDescription
} from '@/components/ui/card'

import {
  Table,
  TableHeader,
  TableBody,
  TableHead,
  TableRow,
  TableCell
} from '@/components/ui/table'
import { Button } from '@/components/ui/button'


const authorizedApps = ref([
  {
    id: 1,
    name: "微信",
    authorizedTime: "2023-06-01",
    scope: "基本信息、好友列表",
  },
  {
    id: 2,
    name: "支付宝",
    authorizedTime: "2023-05-15",
    scope: "基本信息、支付功能",
  },
  {
    id: 3,
    name: "GitHub",
    authorizedTime: "2023-04-20",
    scope: "基本信息、仓库访问",
  },
]);

const revokeAuthorization = (appId: number) => {
  // 实现撤销授权的逻辑
  console.log("Revoking authorization for app:", appId);
};
</script>
